import Taro, { Component, Config } from '@tarojs/taro'
import {View, Input, Button, Text, Image, Form} from '@tarojs/components'
import {IStoreProps} from '../../store/Stores'
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {getRuntime, isPhone} from '../../utils/common'

import './login.less'
import eye from "../../assets/img/icon_eye.png";
import eye_on from "../../assets/img/icon_eye_on.png";

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class ForgetPassword extends Component<IHomeProps> {
  constructor(props){
    super(props)
  }

  state = {
    currentEye: false,
    currentCenterEye: false,
    eyeImg: eye,
    eyeCenterImg: eye,
    focus: 'userPhoneNumber',
    // userPhoneNumber: '13629439834',
    userPhoneNumber: null,
    userCode: '',
    //password: '123456',
    password: null,
    passwordCenter: null,
    isComplete: true,
    passwordType: 'password',
    passwordTypeCenter: 'password',
    getCodeText: '获取验证码',
    btnCodeStatus: false
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '找回密码'})
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  // input聚焦
  inputFocus (type: string = 'password') {
    this.setState({
      focus: type
    })
  }

  toggleEye () {
    this.setState({
      currentEye: !this.state.currentEye
    }, () => {
      let  eyeImg = this.state.currentEye ? eye_on : eye
      let  passwordType = this.state.currentEye ? 'text' : 'password'
      this.setState({
        eyeImg,
        passwordType
      })
    })
  }

  toggleCenterEye () {
    this.setState({
      currentCenterEye: !this.state.currentCenterEye
    }, () => {
      let  eyeCenterImg = this.state.currentCenterEye ? eye_on : eye
      let  passwordCenterType = this.state.currentCenterEye ? 'text' : 'password'
      this.setState({
        eyeCenterImg,
        passwordCenterType
      })
    })
  }

  inputChange (type: string,e) {
    this.setState({
      [type]: e.target.value
    }, () => {
      let { password,passwordCenter,userCode,userPhoneNumber } = this.state
      if(userPhoneNumber && userCode && password && passwordCenter){
        this.setState({
          isComplete: false
        })
      }else {
        this.setState({
          isComplete: true
        })
      }
    })
  }

  getCode() {
    let { userPhoneNumber,btnCodeStatus } = this.state
    if(typeof btnCodeStatus === 'number') return
    if(!userPhoneNumber){getRuntime().showToast('请填写手机号~'); return false}
    if(!isPhone){getRuntime().showToast('请填写11位手机号码~'); return false}

    this.countDown()

    let { userStore } =  this.props.stores
    userStore.getSmsCode({
      form: {
        phoneNumber: userPhoneNumber
      },callback: () => {
        getRuntime().showToast('验证码发送成功，请注意查收~')
      }
    })
  }

  // 验证码倒计时
  countDown() {
    let getCodeText = 60
    let timer = setInterval(() => {
      getCodeText--
      if(getCodeText===0){
        clearInterval(timer)
        this.setState({
          getCodeText: '获取验证码',
          btnCodeStatus: false,
        })
      }else {
        this.setState({
          getCodeText: getCodeText+'s',
          btnCodeStatus: true,
        })
      }
    },1000)
  }

  formSubmit() {
    let { userPhoneNumber,userCode,password,passwordCenter } = this.state
    if(!userPhoneNumber){getRuntime().showToast('请填写手机号~'); return false}
    if(!userCode){getRuntime().showToast('请填写验证码s~'); return false}
    if(!password){getRuntime().showToast('请填写密码~'); return false}
    if(password!==passwordCenter ){getRuntime().showToast('两次输入密码不一致~'); return false}

    let { userStore } =  this.props.stores
    userStore.setPassword({
      form: {
        password: password,
        smsCode: userCode,
        phoneNumber: userPhoneNumber
      },
      callback: () => {
        getRuntime().showModal('修改成功','是否前往登录?',() => {
          getRuntime().navigateTo('/pages/login/login')
        })
      }
    })
  }

  render () {
    let { focus,eyeImg,eyeCenterImg,passwordType,passwordCenterType,isComplete,getCodeText,btnCodeStatus } = this.state
    return (
      <View className='login-wrap'>
       <View>
         <View className={focus === 'userPhoneNumber' ? 'input-group input-group-on' : 'input-group'}>
           <Text className='input-title'>手机号</Text>
           <Input className='input' autoFocus type='number' placeholderClass='placeholder-class' placeholder='请输入11位手机号' maxLenght='11'
                  name='userPhoneNumber'
                  onFocus={this.inputFocus.bind(this, 'userPhoneNumber')}
                  onChange={this.inputChange.bind(this,'userPhoneNumber')}
           />
         </View>

         <View className={focus === 'userCode' ? 'input-group input-group-on' : 'input-group'}>
           <Text className='input-title'>验证码</Text>
           <Input className='input' placeholderClass='placeholder-class' placeholder='请输入验证码'
                  name='userCode'
                  onFocus={this.inputFocus.bind(this, 'userCode')}
                  onChange={this.inputChange.bind(this,'userCode')}
           />
           <Button className='get-code' onClick={this.getCode.bind(this)} type={"default"} disabled={btnCodeStatus}>{getCodeText}</Button>
         </View>

         <View className={focus === 'password' ? 'input-group input-group-on' : 'input-group'}>
           <Text className='input-title'>密码</Text>
           <Input className='input'  placeholderClass='placeholder-class' placeholder='请输入登录密码' type={passwordType}
                  name='password'
                  onFocus={this.inputFocus.bind(this, 'password')}
                  onChange={this.inputChange.bind(this,'password')}
           />
           <Image className='eye' src={eyeImg} onClick={this.toggleEye.bind(this)} />
         </View>

         <View className={focus === 'passwordCenter' ? 'input-group input-group-on' : 'input-group'}>
           <Text className='input-title'>确认密码</Text>
           <Input className='input'  placeholderClass='placeholder-class' placeholder='请输入登录密码' type={passwordCenterType}
                  name='passwordCenter'
                  onFocus={this.inputFocus.bind(this, 'passwordCenter')}
                  onChange={this.inputChange.bind(this,'passwordCenter')}
           />
           <Image className='eye' src={eyeCenterImg} onClick={this.toggleCenterEye.bind(this)} />
         </View>

         <Button className={isComplete ? 'btn-submit' : 'btn-submit  btn-submit-on'} type='primary' onClick={this.formSubmit.bind(this)} disabled={isComplete}>确定修改</Button>

         <View className='back-login' onClick={this.handelRouter.bind(this, '/pages/login/login')}>返回登录</View>
       </View>
      </View>
    )
  }
}

export default ForgetPassword
